<template>
    <div class="container">
        <div>
            <div class="tou">
                
            </div>
            <div class="tou1">
                <div class="name">
                    <div>
                        <el-upload
                        class="avatar-uploader"
                        action="http://upload-cn-east-2.qiniup.com"
                        :show-file-list="false"
                        :on-success="dada"
                        :data="data"
                        >
                        <el-avatar :size="70" style="margin-right: 20px;" :src="title.img"></el-avatar>
                        </el-upload>
                        
                    </div>
                    <div style="margin-top: 10px;">
                        <div class="names">
                            姓名：{{title.name}}
                        </div>
                        <div>
                            手机号：{{title.mobile}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="taotao" v-for="i in xiaotaotao" :key="i">
            <div class="name2">
                <i :class="i.tu"></i> {{i.tong}}
            </div>
            <div class="name1"><i class="el-icon-arrow-right"></i></div>
        </div>
        <div>
            <el-button class="tuilogin" @click="qulogin" round v-if="! token">去登入</el-button>
            <el-button class="tuilogin" @click="tuilogin" round v-else>退出登入</el-button>



        </div>
        <BottomBar :index="3"></BottomBar>
    </div>
</template>

<script>
import Axios from "axios";
import BottomBar from "@/components/BottomBar.vue";
export default {
    name: '',
    data() {
        return {
            xiaotaotao:[
            ],
            title:[],
            data:{
                token:'',
            },
            token:localStorage.token
        };
    },
    props: {},

    components: {
        BottomBar,
    },

    created() {},

    mounted() {
        this.userGet()
        this.toeknget()
    },

    methods: {
        toeknget(){
            Axios.get('token/')
            .then(res => {
            console.log(res)
            if (res.data.code == 200){
                this.data.token = res.data.token
            }
        })
        .catch(err => {
          console.log(err)
        })
        },
        tuilogin(){
            localStorage.removeItem('token')
            this.$router.push('/')
        },
        userGet(){
            Axios.get('user/',{
                headers:{
                    'Authorization':localStorage.getItem('token')
                }
            })
            .then(res => {
            console.log(res)
            if (res.data.code == 200){
                this.title = res.data.data

            }
            })
            .catch(err => {
            console.log(err)
            })
        },
        dada(response){
            console.log(response.key)
            Axios.put('user/',{
                img:'http://rkm2dzt0t.bkt.clouddn.com/' + response.key
            },{
                headers:{
                    'Authorization':localStorage.getItem('token')
                }
            })
            .then(res => {
            console.log(res)
            if (res.data.code == 200){
                this.userGet()

            }
            })
            .catch(err => {
            console.log(err)
            })
        },
        qulogin(){
            this.$router.push('/')
        }
    },

    computed: {},

    watch: {},

    directives: {},

    filters: {}
};
</script>
<style>
body {
    margin: 0px;
  }
</style>


<style scoped>
.container{
    background-color: rgb(242, 242, 242);
    height: 100vh; /* vh 屏幕高度 */
}

.names{
    margin-bottom: 10px;
}

.tou{
    background-color: rgb(0, 168, 225);
    width: 100%;
    height: 120px;
    border-radius: 0 0px 50px 50px;
}
.tou1{
    
    background-color: rgb(255, 255, 255);
    width: 90%;
    height: 120px;
    margin: 0% auto;
    border-radius: 10px 10px 10px 10px;
    position: relative;
    top: -50px;
    color: #000000;
    box-shadow: 0 -2px 10px #8d8d8d;
}

.name{
    display: flex;
    position: relative;
    margin-left: 20px;
    top: 20px;
    
}

.taotao{
    display: flex;
    margin-bottom: 17px;
}
.name1{
    margin-right: 30px;
    font-size: 20px;
    width: 100%;
    text-align: right;
}
.name2{
    font-size: 20px;
    margin-left: 30px;
    width: 200px;
}

.tuilogin{
    margin: 0% auto;
    width: 250px;
}
</style>
